<template>
	<view>
		<view class="page_title">
		  <nav-back></nav-back>
		  <view class="page_name">线上互选</view>
		  <view class="blank"></view>
		</view>
		
		<view class="banxin">
		  <scroll-view scroll-x class="scroll-x" scroll-with-animation 	:scroll-left='scrollLength'>
		    <view class="ways">
		      <view v-for="(item,index) in careerList" class="way" :class="activeWay== item ? 'active' : ''"
		      @click="handleWays(item,index)">
		        {{item}}
		      </view>
		    </view>
		  </scroll-view>
		
		  <scroll-view scroll-y class="scroll" @touchmove="handleTouchmove" @touchstart="handleTouchstart" @touchend="handleTouchend"
				:refresher-enabled="true" :refresher-triggered="isTrigger" @refresherrefresh="handleRefresh">
		    <view class="list" >
		      <view class="person" v-for="(item,index) in userList" @click="handleDetail(item.id,index)">
		        <image class="photo" :src="item.avatar" mode=""/>
		        <image  v-if="item.authentication&&item.authentication.realNameStatus==0" class="nameauth" src="/static/img/nameauth.png" mode=""/>
		        <image v-if="item.isVip==1" class="vip" src="/static/img/vip.png" mode=""/>
		        <image v-if="item.heart" class="like" src="/static/img/like.png" mode=""/>
		        <image v-else class="nolike" src="/static/img/nolike.png" mode=""/>
		        <view class="info">
		          <view class="name">
		            {{item.name}}  
		            <image v-if="item.sex==0" class="sex" src="/static/img/woman.png" mode=""/>
		            <image v-if="item.sex==1" class="sex" src="/static/img/man.png" mode=""/>
		          </view>
		          {{item.age}}岁 {{item.height}}cm {{item.education?item.education:''}}
		        </view>
		      </view>
		    </view>
		  </scroll-view>
		
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import NavBack from '@/components/NavBack.vue'

	export default {
		components: {
			NavBack
		},
		data() {
			return {
				activeWay: '全部',
				careerList: ['全部','公务员', '金融/律师', '教师', '医护', '国企', '高颜值','资产千万+'],
				currentTab: 0,
				scrollLength:0,
				userList: [],
				userIds: [],
				flag: 0,
				lastX: 0,
				lastY: 0,
				isTrigger: false,
				_freshing: false
			}
		},
		onLoad() {
			this.initList()
		},
		methods: {
			initList() {
			    let that = this
			    request(`/employee/onlineByProfession?profession=${this.activeWay}`).then((res) => {
					this.isTrigger = false
					this._freshing = false
			      if (res.data.code == 1) {
					  that.userList = res.data.data
					  that.userIds = res.data.data?.map((item) => item.id)
			      } else {
			        uni.showToast({
			          title: res.data.msg,
			          icon: 'none',
			          duration: 2000
			        })
			      }
			      console.log(this.userList, 'userList');
			    })
			  },
			  handleRefresh() {
			  	if (this._freshing) return
			  	this._freshing = true
			  	this.isTrigger = true;
			  	this.initList()
			  },
			  handleWays(type, index) {
				console.log(type, index,'type, index');
				this.activeWay =  type
				this.currentTab =  index
				this.scrollLength =  index*80-100
			    this.initList()
			  },
			  handleDetail(id,index) {
			    let ids = JSON.stringify(this.userIds)
			    uni.navigateTo({
			      url: `/pages/linkPage/userDetail/userDetail?id=${id}&ids=${ids}&index=${index}`
			    })
			  },
			  handleTouchstart: function (e) {
			    this.flag = 0;
			    this.lastX = e.changedTouches[0].pageX;
			    this.lastY = e.changedTouches[0].pageY;
			  },
			  handleTouchmove: function (e) {
			    if (this.flag !== 0) {
			      return;
			    }
			    let currentX = e.changedTouches[0].pageX;
			    let currentY = e.changedTouches[0].pageY;
			    let tx = currentX - this.lastX;
			    let ty = currentY - this.lastY;
			    //左右方向偏移大于上下偏移认为是左右滑动
			    if (Math.abs(tx) - Math.abs(ty) > 5) {
			      console.log("cc")
			      // 向左滑动
			      if (tx < 0) {
					  console.log(this.currentTab,'this.currentTab');
			        // 如果到最右侧
			        console.log('向左滑动');
			        this.flag = 1;
			        if (this.currentTab === 7) {
			          return
			        } else {
						this.currentTab = this.currentTab + 1
						this.scrollLength = this.scrollLength + 80
			        }
			        console.log(this.scrollLength,'this.scrollLength');
			        
			        this.activeWay = this.careerList[this.currentTab]
			        this.initList()
			      }
			      // 向右滑动 
			      else if (tx > 0) {
			        // 如果到最左侧
			        this.flag = 2;
			        console.log('向右滑动');
			        if (this.currentTab === 0) {
			          return
			        } else {
						this.currentTab = this.currentTab - 1
						this.scrollLength = this.scrollLength - 80
			        }
			        console.log(this.scrollLength,'this.scrollLength');
			        
			        this.activeWay = this.careerList[this.currentTab]
			        this.initList()
			      }
			    }
			    //上下方向滑动
			    else {
			      if (ty < 0) {
			        //向上滑动
			        console.log("向上滑动")
			        this.flag = 3;
			      } else if (ty > 0) {
			        //向下滑动
			        console.log("向下滑动")
			        this.flag = 4;
			      }
			    }
			    //将当前坐标进行保存以进行下一次计算
			    this.lastX = currentX;
			    this.lastY = currentY;
			  },
			  handleTouchend: function (e) {
			    this.flag = 0
			  },
		}
	}
</script>

<style lang="scss">
/* pages/selection/selection.wxss */

.scroll{
  height: 80vh;
  margin-top: -200rpx;
}
.ways{
  display: flex;
  // overflow: auto;
  flex-shrink: 0;
  font-size: 32rpx;
  border-radius: 50rpx;
  color: rgba(102, 102, 102, 1);
  margin-top: 30rpx;
  .way{
    margin-right: 25rpx;
    min-width: 180rpx;
    font-size: 28rpx;
    line-height: 56rpx;
    text-align: center;
    color: rgba(166, 166, 166, 1);
    border-radius: 56rpx;
    background-color: rgba(242, 242, 242, 1);
  }
  .active{
    color: #fff;
    background-color: rgba(156, 156, 255, 1);
  }
}

.list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .person{
    position: relative;
    width: 48%;
    height: 350rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
    border-radius: 40rpx;
    background-color: rgba(235, 235, 255, 1);
    .nameauth{
      position: absolute;
      width: 90rpx;
      height: 30rpx;
      top: 195rpx;
      left: 20rpx;
    }
    .vip{
      position: absolute;
      width: 40rpx;
      height: 40rpx;
      top: 20rpx;
      left: 20rpx;
    }
    .nolike,.like{
      position: absolute;
      width: 40rpx;
      height: 40rpx;
      top: 20rpx;
      right: 20rpx;
    }
    .photo{
      width: 100%;
      height: 240rpx;
    }
    .info{
      padding:0 30rpx;
      font-size: 20rpx;
      color: rgba(102, 102, 102, 1);
    }
    .name{
      font-size: 24rpx;
      font-weight: 500;
      margin: 15rpx 0;
      color: rgba(51, 51, 51, 1);
      line-height: 34rpx;
      max-width: 200rpx;
      white-space: nowrap; /* 确保文本在一行内显示 */
      overflow: hidden; /* 隐藏溢出的内容 */
      text-overflow: ellipsis; 
    }
    .sex{
      width: 20rpx;
      height: 20rpx;
      margin: 0 10rpx;
    }
  }
}

.scroll{
  height: 80vh;
  padding: 0;
  margin-top: 10rpx;
}
.scroll-x{
  height: 120rpx;
}

</style>
